<template>
  <!-- show-file-list是否展示列表 -->
  <!-- action 必须写，但是会被:http-request覆盖 -->
  <!-- :before-upload 上传前的钩子函数，return false可以停上传：校验文件的类型和大小 -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImage"
  >
    <!-- (自动上传)action是上传地址 人资项目不需要 人资项目(手动上传)  -->
    <!-- show-file-list不展示列表 -->
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>

</template>

<script>
import COS from 'cos-js-sdk-v5'

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 检查函数 判断文件的类型还有大小 return  true(继续上传)/false(停止上传)
    beforeAvatarUpload(file) {
      // jpeg png gif bmp

      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'application/x-msdownload'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2000000 // 5M

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    // 选择图片上传
    // 前端上传文件流程
    // 1、使用el-upload组件
    // 2、检验上传的文件 借助before-upload事件=》文件类型和文件大小
    // 3、上传文件  借助的http-request事件=》自定义上传
    // 4、用COS云存储桶
    // 4.1、申请云存储桶
    // 4.2、配通名称 区域 秘钥id 秘钥的key
    // 4.3、下sdk包
    // 4.4、使用腾讯云uploadFile  自动根据文件大小，开始断点续传
    // 5、上传成功后，得到图片的地址，桶里面位置Location
    // 6、把图片的地址，拼接上http://，赋值给value，父组件就可以拿到图片的地址
    // 选择图片上传
    uploadImage(params) {
      const cos = new COS({
        SecretId: '',
        SecretKey: ''
      }) // 完成cos对象的初始化
      // cos.putObject({
      //   Bucket: 'cbao-1306061275', // 存储桶名称
      //   Region: 'ap-guangzhou', // 地域名称
      //   Key: params.file.name, // 文件名称
      //   StorageClass: 'STANDARD', // 固定值
      //   Body: params.file // 文件对象
      // }, (err, data) => {
      //   if (data.statusCode === 200 && data.Location) {
      //     // 拿到了腾讯云返回的地址
      //     // 通过input自定义事件将地址传出去
      //     console.log('xxx  ----->  ', data.Location)
      //     this.$message.success('上传成功') // 上传成功提示消息
      //     this.$emit('input', 'http://' + data.Location) // 将地址返回了
      //   } else {
      //     this.$message.error(err.Message) // 上传失败提示消息
      //   }
      // })
      cos.uploadFile({
        Bucket: 'cbao-1306061275', // 填入您自己的存储桶，必须字段
        Region: 'ap-guangzhou', // 存储桶所在地域，例如ap-beijing，必须字段
        Key: params.file.name, // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
        Body: params.file, // 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象
        // SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值，超过5MB使用分块上传，非必须
        onProgress: function(progressData) { // 非必须
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        if (err) {
          console.log('  ----->  ', err)
        }
        if (data.statusCode === 200 && data.Location) {
          console.log('  ----->  ')
        }
      })
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
